<!-- 人事-基础设置-考勤异常提醒设置 -->
<template>
  <pageHeaderNew :title="title" :breadCrumb="breadCrumb" showBack>
    <template #buts>
      <a-space>
        <a-button @click="cancel">取消</a-button>
        <a-button type="primary" @click="save">保存</a-button>
      </a-space>
    </template>
  </pageHeaderNew>
  <div class="wrap">
    <div class="reminding">
      <a-space>
        <icon-exclamation-circle
          :size="20"
          :style="{
            color: 'red'
          }"
        />
        <span
          >系统设置员工出勤异常状态，并设定对应时间点，到时间点触发提醒人力资源部门、员工个人等</span
        >
      </a-space>
    </div>

    <div v-for="(item, index) in list" :key="index">
      <a-form :model="list">
        <a-form-item
          field=""
          :label="`${
            index === 0 ? '1、员工上班未打卡提醒' : '2、员工下班未打卡提醒'
          }`"
        >
        </a-form-item>
        <a-form-item field="" label="提醒条件：">
          {{
            index === 0
              ? '在员工上班开始的时间点，系统自动检测到员工并没有打卡的情况下，触发以下提醒配置'
              : '在员工下班的时间后，系统自动检测到员工并没有打卡的情况下，触发以下提醒配置'
          }}
        </a-form-item>
        <a-form-item field="" label="提醒时间：">
          {{ index === 0 ? '员工正常上班时间前' : '员工下班时间后' }}
          <a-input-number
            v-model="item.remindTime"
            :style="{
              width: '50px',
              margin: '0 5px'
            }"
            hideButton
            :min="1"
          ></a-input-number>
          分钟，提醒
        </a-form-item>
        <a-form-item field="" label="提醒方式：">
          <a-checkbox-group v-model="item.remindWay">
            <a-checkbox :value="1">短信提醒</a-checkbox>
            <a-checkbox :value="2">系统信息提醒</a-checkbox>
            <a-checkbox :value="3">邮件提醒</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item field="" label="提醒内容：">
          <a-textarea
            placeholder="请输入内容"
            :maxLength="300"
            :autoSize="{
              minRows: 10
            }"
            :style="{
              width: '500px'
            }"
            allowClear
            showWordLimit
            v-model="item.remark"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </div>

    <div class="content"></div>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter();
const title = '考勤异常提醒配置';

const breadCrumb: string[] = [
  '人事',
  '基础设置',
  '信息提醒与预警设置',
  '考勤异常提醒配置'
];

const list = reactive([
  // 新员工合同
  {
    remindTime: undefined, // 提醒时间
    remindWay: [], // 提醒方式
    remark: '' // 提醒内容
  },

  // 到期合同
  {
    remindTime: undefined, // 提醒时间
    remindWay: [], // 提醒方式
    remark: '' // 提醒内容
  }
]);

// 获取数据
const getData = async () => {
  try {
    console.log(1);
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 保存
const save = async () => {
  try {
    console.log(1);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 取消
const cancel = () => {
  router.back();
};
</script>

<style scoped lang="less">
.wrap {
  padding: 10px 20px;

  .reminding {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }

  .send {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
